<template>
    <view class="goods_list">
        <goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
        <view class="isOver" v-if="flag">——我是有底线的——</view>
    </view>
</template>

<script>
    import goodsList from '../../components/goods-list/goods-list.vue'
    export default {
        data() {
            return {
                pageIndex: 1,
                goods: [], 
                flag: false
            }
        },
        components: {"goods-list": goodsList},
        methods: {
            //获取商品列表数据
            async getGoodsList(callBack) {
                const res = await this.$myRequest({
                    url: '/api/getgoods?pageindex=' + this.pageIndex
                })
                this.goods = [...this.goods, ...res.data.message]
                callBack && callBack()
            },
            // 导航到商品详情页
            goGoodsDetail(id) {
                uni.navigateTo({
                    url: '/pages/goods-detail/goods-detail?id=' + id
                })
            }
        },
        onLoad() {
            this.getGoodsList()
        },
        onReachBottom() {
            console.log('上拉加载了')
            if(this.goods.length < this.pageIndex * 10) return this.flag = true
            this.pageIndex++;
            this.getGoodsList()
        },
        onPullDownRefresh() {
            console.log('下拉刷新了')
            this.pageIndex = 1
            this.goods = []
            this.flag = false
            setTimeout(() => {
                this.getGoodsList(() => {
                    uni.stopPullDownRefresh()
                })
            }, 1000)
        }
    }
</script>
<style lang="scss">
	.goods_list {
		background: #eee;;
	}
	.isOver {
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		// background: #fff;
		font-size: 28rpx;
	}
</style>